<template>
  <div class="total-wrap">
    <div class="node-container">
      <div class="node-container-left">
        <div class="tag-container">
			
		<div v-if="isMainNode" class="node-no"></div>
		  
          <div v-else class="node-tag-container">
            <div class="node-tag"></div>
          </div>
        </div>
        <div class="line-container" :style="{height: isMainNode?'120rpx':'120rpx'}">
          <div v-if="!isFirst" class="line" :style="{height: isMainNode?'135rpx':'135rpx'}"></div>
        </div>
      </div>
      <div class="node-container-right">
        <div v-if="isMainNode" class="node-title" :style="{color: isMainNode?'#f70000':'#333'}">{{nodeData.statusName}}</div>
        <div class="node-desc" :style="{color: isMainNode?'#f70000':'#242424'}">{{acceptStationFixed}}</div>
        <!-- <div v-if="nodeData.phone" class="node-phone">{{nodeData.phone}}</div> -->
        <div class="node-time" :style="{color: isMainNode?'#f70000':'#808080'}">{{nodeData.createTime}}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    isNewest: {
      type: Boolean,
      default: false
    },
    isFirst: {
      type: Boolean,
      default: false
    },
    isMainNode: {
      type: Boolean,
      default: false
    },
    nodeData: {
      type: Object,
      default () {
        return {
          status: '',
          statusName: '',
          createTime: '2019-01-01 00:00:00',
          acceptStation: 'xxxxxx'
        }
      }
    }
  },
  computed: {
    acceptStationFixed () {
      if (!this.nodeData.acceptStation) return ''
      return this.nodeData.acceptStation.replace(/(\d{3})\d{4}(\d{4})/, '')
    }
  }
}
</script>
<style lang="scss" scoped>
.total-wrap {
  width: 100%;
  .node-container {
    width: 100%;
    height: auto;
    display: flex;
    &-left {
      width: 44rpx;
      height: auto;
      .tag-container {
        
        .node-tag-container {
          display: flex;
          justify-content: center;
          align-items: center;
          .node-tag {
            width: 14rpx;
            height: 14rpx;
            background-color: #dcdcdc;
            border-radius: 50%;
          }
        }
      }
      .line-container {
        box-sizing: border-box;
        width: 44rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .line {
			position: relative;
			z-index: 0;
          width: 2rpx;
          background-color: #dcdcdc;
        }
      }
    }
    &-right {
      flex: 1;
      box-sizing: border-box;
      padding: 0 10rpx 35upx 24rpx;
      .node-title {
        width: 100%;
        color: #222;
        font-size: 28rpx;
        font-family: 'PingFangSC-Medium';
      }
      .node-desc {
        width: 100%;
        min-height: 30rpx;
        line-height: 30rpx;
        color: #222;
        font-size: 24rpx;
        font-family: 'PingFangSC-Regular';
        word-wrap: break-word;
        word-break: normal;
      }
      .node-phone {
        margin-top: 8rpx;
        width: 100%;
        height: 26rpx;
        line-height: 26rpx;
        color: #FE4E2C;
        font-size: 26rpx;
        font-family: 'Avenir-Medium';
      }
      .node-time {
        margin-top: 12rpx;
        width: 100%;
        height: 34rpx;
        line-height: 34rpx;
        color: #999;
        font-size: 24rpx;
        font-family: 'Avenir-Book';
      }
    }
  }
}
	.node-no {
		position: relative;
		z-index: 25;
		margin: 5upx auto;
		width: 8upx;
		height: 8upx;
		border: 7upx solid #f70000;
		border-radius: 50%;
	}
	.node-container-right {
		padding-bottom: 35upx;
	}
</style>